import { h } from "preact";

interface PaginationProps {
  currentPage: number;
  totalPages: number;
  maxVisible?: number; // Number of page links to show around the current page
  searchQuery?: string;
  yearFilter?: string;
  monthFilter?: string;
}

export default function Pagination({
  currentPage,
  totalPages,
  maxVisible = 3, // Show current page + 1 on each side (e.g., 2,3,[4],5,6)
  searchQuery = "",
  yearFilter = "",
  monthFilter = "",
}: PaginationProps) {
  if (totalPages <= 1) return null;

  const getPageUrl = (page: number) => {
    const params = new URLSearchParams();
    // Only set the 'page' parameter if it's not the first page
    if (page > 1) {
      params.set("page", page.toString());
    }
    
    if (searchQuery) params.set("search", searchQuery);
    if (yearFilter) params.set("year", yearFilter);
    if (monthFilter) params.set("month", monthFilter);

    const queryString = params.toString();
    // If the resulting query string is empty (e.g. page 1 with no filters), make the href just "/"
    // Otherwise, prefix with "?"
    return queryString ? `?${queryString}` : "/"; 
  };

  const pageNumbers: (number | string)[] = [];
  const P = "pagination-button"; // Normal page button
  const PD = "pagination-button-disabled"; // Disabled page button
  const PE = "pagination-ellipsis"; // Ellipsis
  const PA = `${P} bg-primary-500 text-white shadow-sm`; // Active page button

  // Previous Button
  pageNumbers.push(
    <a
      key="prev"
      href={currentPage > 1 ? getPageUrl(currentPage - 1) : "#"}
      className={currentPage > 1 ? P : PD}
      aria-disabled={currentPage === 1}
      aria-label="Previous Page"
    >
      &lt;
    </a>
  );

  // First Page
  if (currentPage > maxVisible + 1) {
    pageNumbers.push(<a key={1} href={getPageUrl(1)} className={P}>1</a>);
    if (currentPage > maxVisible + 2) {
      pageNumbers.push(<span key="ellipsis-start" className={PE}>...</span>);
    }
  }

  // Page numbers around current page
  let startPage = Math.max(1, currentPage - maxVisible);
  let endPage = Math.min(totalPages, currentPage + maxVisible);

  if (currentPage <= maxVisible) {
    endPage = Math.min(totalPages, 1 + (maxVisible * 2));
  }
  if (currentPage > totalPages - maxVisible) {
    startPage = Math.max(1, totalPages - (maxVisible * 2));
  }

  for (let i = startPage; i <= endPage; i++) {
    pageNumbers.push(
      <a key={i} href={getPageUrl(i)} className={currentPage === i ? PA : P}>
        {i}
      </a>
    );
  }

  // Last Page
  if (currentPage < totalPages - maxVisible) {
    if (currentPage < totalPages - maxVisible - 1) {
      pageNumbers.push(<span key="ellipsis-end" className={PE}>...</span>);
    }
    pageNumbers.push(<a key={totalPages} href={getPageUrl(totalPages)} className={P}>{totalPages}</a>);
  }

  // Next Button
  pageNumbers.push(
    <a
      key="next"
      href={currentPage < totalPages ? getPageUrl(currentPage + 1) : "#"}
      className={currentPage < totalPages ? P : PD}
      aria-disabled={currentPage === totalPages}
      aria-label="Next Page"
    >
      &gt;
    </a>
  );
  
  return (
    <nav
      className="pagination-bar animate-fade-up"
      style={{ animationDelay: "0.2s" }}
    >
      {pageNumbers.map((item) => item)}
    </nav>
  );
}

// Helper CSS (ideally in a global stylesheet, but can be added via <style> tag or to tailwind.config if preferred)
/*
.pagination-button {
  @apply inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm font-medium transition-colors duration-200;
}
.pagination-button-disabled {
  @apply inline-flex items-center justify-center w-9 h-9 rounded-lg text-sm font-medium opacity-50 cursor-not-allowed;
}
.pagination-ellipsis {
  @apply inline-flex items-center justify-center w-9 h-9 text-sm text-surface-400;
}
*/ 